<!DOCTYPE html>
<html layout:decorate="~{layout/master}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <style>
        html, body, #app {
            height: 100%;
        }

        body {
            background: url('/images/login-bg.jpg') no-repeat;
        }

        .sys-banner {
            color: #fff;
            margin-top: 80px;
        }

        .sys-title {
            font-size: 30px;
            height: 70px;
        }

        .sys-title::after {
            content: '';
            position: absolute;
            height: 1px;
            width: 100%;
            background: linear-gradient(to right, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));
            bottom: 0;
            left: 0;
        }

        .login-banner {
            background-color: #fff;
            border-radius: 5px;
            margin-top: 100px;
            padding: 20px 60px 50px 60px;
            width: 430px;
            height: 550px;
        }

        .login-form {
            margin-top: 20px;
        }

        .login-title {
            text-align: center;
            font-size: 40px;
        }

        .login-remark {
            text-align: center;
            font-size: 18px;
            margin-top: 20px;
        }
    </style>
    <script src="/js/jsencrypt.min.js"></script>
</head>
<body>
<Row layout:fragment="content" style="max-width:1200px;margin:auto">
    <i-col span="14">
        <div class="sys-banner">
            <div class="sys-title">
                后台管理系统
            </div>
        </div>
    </i-col>
    <i-col span="10">
        <div class="login-banner">
            <div class="login-title">
                登录
            </div>
            <div class="login-form">
                <i-form :model="form" label-position="left" :label-width="0">
                    <Form-item>
                        <i-input v-model.trim="form.acc" placeholder="账号" size="large" @on-enter="login"></i-input>
                    </Form-item>
                    <Form-item>
                        <i-input v-model.trim="form.pwd" type="password" placeholder="密码" size="large"
                                 @on-enter="login"></i-input>
                    </Form-item>
                    <!--<Form-item v-if="loginType==1">-->
                    <!--<Row :gutter="16">-->
                    <!--<i-col span="12">-->
                    <!--<i-input v-model="form.code" placeholder="验证码" size="large"></i-input>-->
                    <!--</i-col>-->
                    <!--<i-col span="12">-->
                    <!--<img :src="vcodeSrc" @click="reloadVcode">-->
                    <!--</i-col>-->
                    <!--</Row>-->
                    <!--</Form-item>-->
                </i-form>
            </div>
            <div>
                <i-button type="success" size="large" long :loading="loading" @click="login">登录</i-button>
            </div>
        </div>
    </i-col>
</Row>

<script layout:fragment="script">
    const m_apis = {
        login(p_form) {
            let enForm = PB.extend({}, p_form);
            enForm.acc = this._fmtData(p_form.acc);
            enForm.pwd = this._fmtData(p_form.pwd);
            // enForm.imgcode = this._fmtData(p_form.imgcode);
            return PB.apiRoute('/api/sys/user/login', 'POST', enForm)
        },
        _fmtData(str) {
            var jsencrypt = new JSEncrypt();
            jsencrypt.setPublicKey(window.winRSAPublicKey);
            // enData用来装载加密后的数据
            return jsencrypt.encrypt(str);
        }
    };
    let vu = new Vue({
        el: '#app',
        data: {
            apis: m_apis,
            form: {
                acc: '',
                pwd: ''
            },
            loading: false
        },
        created() {
            PB.setLoginUser('');
        },
        methods: {
            login: function () {
                this.loading = true;
                let that = this;

                PB.ajax(this.apis.login(this.form), {
                    showLoading: false,
                    contentType: 'application/x-www-form-urlencoded',
                    complete: function () {
                        that.loading = false;
                    }
                }, function (d) {
                    PB.setLoginUser(d.data);
                    PB.open('main');
                });
            }
        }
    })

    //防止页面后退
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
    });
</script>
</body>
</html>

